<template>
  <div id="artistsClass">
    <!-- 标题 -->
    <div class="title">{{ title }}:</div>
    <!-- 主要分类 -->
    <div
      :class="{ 'main-class': true, selected: index === selectedIndex }"
      v-for="(item, index) in classInfo"
      :key="index"
      @click="classClick(index)">{{ item }}</div>
  </div>
</template>

<script>
export default {
  name: 'ArtistsClass',
  data () {
    return {
      selectedIndex: 0
    }
  },
  props: {
    classInfo: {
      type: Array,
      default () {
        return []
      }
    },
    title: {
      type: String,
      default () {
        return ''
      }
    },
    whichClass: {
      type: Number,
      default () {
        return null
      }
    }
  },
  methods: {
    // 1. 分类点击
    classClick (index) {
      // console.log(index)
      this.selectedIndex = index
    }
  },
  watch: {
    selectedIndex () {
      this.$emit('changeIndex', this.selectedIndex, this.whichClass)
    }
  }
}
</script>

<style scoped lang="less">
#artistsClass {
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  color: #7d667d;
  > div {
    margin: 7px 0;
  }
  .main-class {
    margin: 7px 15px;
    padding: 2px 6px;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    &.selected {
      background-color: #8f9096;
      color: #fff;
    }
    &::after {
      cursor: default;
      position: absolute;
      right: -16px;
      content: "|";
      color: #ccc;
      pointer-events: none;
    }
    &:nth-last-of-type(1)::after {
      display: none;
    }
  }
}
</style>
